<template>
  <div class="msg">

    <!-- 留言板 -->
    <div class="msg-panel">
      <div class="title">
        留言板
      </div>
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="textarea"
        :maxlength="300"
        show-word-limit
        :autosize="{minRows:8,maxRows:16}"
      />
      <div class="tip">
        温馨提示：友好的发言，会让文明更加进步哦！
      </div>
      <div class="post-msg">
        <el-button>发送</el-button>
      </div>
    </div>

    <!-- 留言内容 -->
    <div class="msg-content">
       <div class="msg-item" v-for="item in 8">
         <div class="left">
           <img src="/images/avatar-01.jpg" alt="">
           <p>最炫酷的牛人</p>
         </div>
         <div class="right">
           <div class="time"><i class="jcfont jcweiwancheng"></i>2020-09-08 12:56:30</div>
           <div class="text">
             您好，很喜欢您的博客， 可以交换友链么 可以的话，麻烦在这里回复我 https://www.bestlang.cn/link 网站名称： goshare 网站描述： 分享关于代码的思考与总结 网站地址： https://www.bestlang.cn 图片地址： https://avatars3.githubusercontent.com/u/7815460?s=460&v=4 友链地址： https://w
           </div>
           <div class="msg-item">
             <div class="left">
               <img src="/images/avatar-01.jpg" alt="">
               <p>jiecheng</p>
             </div>
             <div class="right">
               <div class="time">回复<nuxt-link to="/">最炫酷的牛人</nuxt-link><i class="jcfont jcweiwancheng"></i>2020-09-08 12:56:30</div>
               <div class="text">
                 您好，很喜欢您的博客， 可以交换友链么 可以的话，麻烦在这里回复我 https://www.bestlang.cn/link 网站名称： goshare 网站描述： 分享关于代码的思考与总结 网站地址： https://www.bestlang.cn 图片地址： https://avatars3.githubusercontent.com/u/7815460?s=460&v=4 友链地址： https://w
               </div>
             </div>
           </div>
         </div>
       </div>
    </div>
  </div>
</template>

<script>
  export default{
    name: 'msg',
    data(){
      return {
        textarea: ''
      }
    }
  }
</script>

<style lang="scss">
  .msg{
    .el-textarea__inner:focus{
      border-color: $success-color;
    }
  }
</style>
<style lang="scss" scoped>
.msg{
  .msg-panel{
     @include panel;
    .title{
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      padding-bottom: 30px;
    }
    textarea{
     min-height: 150px;
    }
    .tip{
      color: $success-color;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .post-msg{
      display: flex;
      justify-content: flex-end;
    }
  }

  .msg-content{
     @include panel;
     .msg-item{
       display: flex;
       border-bottom: 1px solid #eee;
       padding-bottom: 10px;
       padding-top: 10px;
       .msg-item{
         border-radius: 10px;
         margin-top: 15px;
         background-color: rgba(250,250,250,1);
       }
       .left{
         width: 50px;
         text-align: center;
         padding-top: 15px;
         img{
           border-radius: 50%;
           width: 30px;
           height: 30px;
         }
         p{
           font-size: 12px;
         }
       }
       .right{
         flex: 1;
         padding: 15px;
          .time{
            display: flex;
            align-items: center;
            >i{
              margin-right: 5px;
            }
            >a{
              display:inline-block;
              margin-left: 10px;
              margin-right: 10px;
              color: #2193fe;
            }
          }
          @media screen and(max-width:500px){
            .time{
              font-size: 12px;
            }
          }
          .text{
            padding-top: 10px;
            font-size: 12px;
            word-break: break-all;
          }
       }
     }
  }
}
</style>
